<!-- 游客论坛 -->
<template>
  <div class="forum">

    <div class="tob-con">
      <div class="breadcrumb">
        您当前的位置：
        <span>游客论坛 > </span>&nbsp;
        <span style="cursor: default">{{breadcrumbCon}}</span>&nbsp;
      </div>

    </div>

    <tab :tabs="tabs" :homeImg="homeImg" :homeImgBg="homeImgBg" @tabClick="tabClick">
      <list-pagination v-if="!showTabItemComplaint" :listCon="listCon" @clickListItem="clickListItem"></list-pagination>

      <div v-if="showTabItemComplaint" class="complaint">
        <div class="complaint-one">
          <h4>投诉方式一：</h4>
          <i class="icon iconfont icon-dianhua3"></i> 投诉电话：0851-22622220
        </div>
        <br>

        <div class="complaint-two">
          <h4>投诉方式二：</h4>
          <el-input
            type="textarea"
            maxlength="500"
            :autosize="{ minRows: 10, maxRows: 20}"
            placeholder="请填写投诉事由（最多500字）"
            v-model="textareaValue">
          </el-input>

          <div class="complaint-phone">
            <i class="icon iconfont icon-dianhua3"></i>&nbsp;&nbsp;<span style="fontSize: 14px">被诉方<i style="color:red;fontWeight:bold"> *</i></span>
            <el-input v-model="inputValueComplain" placeholder="请输入被投诉方面（以合同或发票单位为准）"></el-input>
          </div>

          <div class="complaint-phone">
            <i class="icon iconfont icon-dianhua3"></i>&nbsp;&nbsp;<span style="fontSize: 14px">姓名<i style="color:red;fontWeight:bold"> *</i></span>
            <el-input v-model="inputValueUserName" placeholder="请输入您姓名"></el-input>
          </div>

          <div class="complaint-phone">
            <i class="icon iconfont icon-dianhua3"></i>&nbsp;&nbsp;<span style="fontSize: 14px">联系方式<i style="color:red;fontWeight:bold"> *</i></span>
            <el-input v-model="inputValueTelephone" placeholder="请输入您的电话或邮箱"></el-input>
          </div>

          <!-- 图片上传 -->
          <div class="upLoadImg">
            <i class="icon iconfont icon-gongsijianjie"></i>&nbsp;&nbsp;
            <span style="fontSize: 14px">
              图片凭证<i style="fontSize:12px;color:#999"> (注：可上传合同、发票、票据、行程单、图片、视频、录音文件等, 大小不超过10MB)</i>
            </span>
            <ul class="clearfix">
              <li v-if="imgs.length>0" v-for='(item ,index ) in imgs' :key="index">
                <!-- <i class="icon iconfont icon-dianhua3"></i> -->
                <img class="delectImg"  @click="detelectImgItem(index)" :src="require('_as/delect.png')" alt="">
                <img :src="item.path + item.fileName">
              </li>
              <ul class="clearfix-ul">
                <li style="position:relative;cursor: default" v-if="imgs.length>=5 ? false : true">
                  <span style="color: #999;fontSize:40px;cursor: default">+</span>
                </li>
                <li class="clearfix-li" v-if="imgs.length>=5 ? false : true">
                  <input class="upload" type="file" @change='add_img'>
                </li>
              </ul>
            </ul>
          </div>
          <!-- 图片上传 -->

          <div class="complaint-btn">
            <el-button @click="submitBtm" type="primary" plain>确认提交</el-button>
          </div>
        </div>

      </div>

    </tab>

  </div>
</template>

<script>
import Tab from '_c/tab/tab'
import ListPagination from '_c/listPagination/list_pagination'

import homeImg from '_as/homeImg.png'
import homeImgBg from '_as/homeImg_bg.png'

import axios from 'axios'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {
      homeImg,
      homeImgBg,
      breadcrumbCon: '问题解答',
      tabs: [
        {
          tabIndex: '0',
          tabTitle: '问题解答'
        },
        {
          tabIndex: '1',
          tabTitle: '游客反馈'
        },
        // {
        //   tabIndex: 2,
        //   tabTitle: '问卷调查'
        // },
        {
          tabIndex: '3',
          tabTitle: '失物招领'
        },
        {
          tabIndex: '4',
          tabTitle: '游客投诉'
        }
      ],
      listCon: [],
      num: 0,
      showTabItemComplaint: false,
      textareaValue: '',
      inputValueTelephone: '',
      inputValueComplain: '',
      inputValueUserName: '',
      imgs: [],
      imgData: {
        accept: 'image/gif, image/jpeg, image/png, image/jpg'
      }
    }
  },
  components: {
    Tab,
    ListPagination
  },
  computed: {},
  created () {
    this._getListCon(2)
  },
  watch: {},
  mounted () {
    const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    tabClick (item) {
      this.breadcrumbCon = item.tabTitle
      this.showTabItemComplaint = false
      switch (item.tabIndex) {
        case '0':
          this._getListCon(2)
          this.showTabItemComplaint = false
          break
        case '1':
          this._getListCon(3)
          this.showTabItemComplaint = false
          break
        case '3':
          this._getListCon(4)
          this.showTabItemComplaint = false
          break
        case '4':
          this.showTabItemComplaint = true
          break
      }
    },
    clickListItem (item) {
      this.$router.push({
        path: `/forumDetails/${item.contentId}`,
        query: {
          title: item.title,
          createByStr: item.createByStr,
          updateAt: item.updateAt,
          abstracts: item.abstracts
        }
      })
    },
    _getListCon (type) {
      this.$http.get('/v2/reminderList', {
        type: type,
        pageSize: 10000
      }).then(res => {
        const empt = []
        res.data.forEach(item => {
          empt.push({
            id: item.id,
            cont: item.title,
            abstracts: item.abstracts,
            intro: item.intro,
            title: item.title,
            updateAt: item.updateAt,
            createByStr: item.createByStr,
            contentId: item.contentId
          })
        })
        this.listCon = empt
      })
    },
    add_img (event) {
      // let reader = new FileReader()
      let imgItem = event.target.files[0]
      let type = imgItem.type
      let size = imgItem.size
      // let urls = ''
      if (this.imgData.accept.indexOf(type) === -1) {
        alert('请选择我们支持的图片格式！')
        return false
      }
      if (size > 2097152) {
        alert('请选择2M以内的图片！')
        return false
      }
      let params = new FormData()
      params.append('file', imgItem, imgItem.name || 'image.png')
      axios.post('https://bigd.tourage.cn/tourism-complain/upload/add', params, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // const urls = res.data.path + res.data.fileName
        this.imgs.push({
          path: res.data.path,
          fileName: res.data.fileName
        })
        // reader.readAsDataURL(imgItem)
        // var that = this
        // reader.onloadend = function () {
        // that.imgs.push(urls)
        // }
      }).catch(() => {
        alert('上传图片出错！')
      })
    },
    detelectImgItem (index) {
      this.imgs.splice(index, 1)
    },
    submitBtm () {
      if (this.textareaValue !== '' && this.inputValueTelephone !== '' && this.inputValueComplain !== '' && this.inputValueUserName !== '') {
        const params = {
          rName: this.inputValueUserName,
          rSex: null,
          dName: this.inputValueComplain,
          rTel: this.inputValueTelephone,
          sReason: this.textareaValue,
          applicationId: '1041878259056246784',
          source: 1,
          complainFiles: this.imgs
        }
        axios.post('https://bigd.tourage.cn/tourism-complain/complaint/save-out', JSON.stringify(params), {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(res => {
          this.$message.success('提交成功,我们会尽快处理~')
          this.textareaValue = ''
          this.inputValueTelephone = ''
          this.inputValueComplain = ''
          this.inputValueUserName = ''
          this.imgs = ''
        }).catch(() => {
          this.$message.error('提交失败~')
        })
      } else {
        this.$message.error('投诉内容均不能为空~')
      }
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

.tob-con {
  .breadcrumb {
    padding 20px 0 20px 15%
    display flex
    align-items center
    margin-bottom 20px
    box-shadow 0 0 10px 2px #ddd
  }
}
.list-pagination-item {
  width 1200px
  background #F6F6F6
  text-align center
  margin 0 auto
  padding 15px
  h3 {
    font-size 20px
    padding 20px 0
  }
  .list-subtitle {
    display flex
    justify-content center
    padding 0 0 15px 0
    span {
      padding 0 5px
    }
  }
  p {
    text-align left
    padding 15px 0
  }
  .nev-pre-con {
    display flex
    justify-content space-between
    padding-top 15px
    p {
      margin 0 15px
    }
  }
}
.horizontal-span-con-abstracts {
  background #FAF7E5
  text-align left
  padding 10px
  font-size 14px
  line-height 2
}
.complaint {
  text-align left
  line-height 2
  width 50%
  margin 20px auto
  .complaint-btn {
    width 100px
    height 40px
    line-height 40px
    text-align center
    margin 30px auto 20px
    border-radius 5px
    cursor default
  }
}

.upLoadImg {
  .clearfix {
    display flex
    flex-wrap wrap
    li {
      margin 10px
      width 120px
      text-align center
      height 120px
      line-height 120px
      // border 1px solid #ddd
      border-radius 4px
      overflow hidden
      position relative
      .delectImg {
        position absolute
        top -10px
        right 8px
        color #000
        z-index 520
        width 18px
        height 18px
        padding 15px 0 5px
        background rgba(255,255,255,0.5)
        border-radius 30px
      }
      img {
        width 100%
        height 100%
      }
    }
    .clearfix-ul {
      position relative
      overflow hidden
      li {
        span {
          width 120px
          text-align center
        }
      }
      li {
        border 1px solid #ddd
      }
      .clearfix-li {
        position absolute
        top -45px
        left 0
        opacity 0
      }
    }
  }
}

.upload {
  border 1px solid red
  width 120px
  height 120px
}

.complaint-phone {
  margin 15px 0
}

</style>

<style lang="stylus">
.detailsItem {
  span {
    background-color none !important
    p {
      font-size 16px !important
      text-align left
      background-color none !important
      span {
        font-size 16px !important
        background-color transparent !important
      }
    }
  }
}
</style>
